<template>
  <div>
    <van-nav-bar title="个人中心" @click-left="onClickLeft" left-arrow />
    <van-collapse v-model="activeNames">
      <div class="van-collapse-item">
        <div
          role="button"
          tabindex="0"
          aria-expanded="false"
          class="van-cell van-cell--clickable van-collapse-item__title"
        >
          <div class="van-cell__title"><span>用户名</span></div>
          <div>{{ username }}</div>
        </div>
      </div>
      <div class="van-collapse-item">
        <div
          role="button"
          tabindex="0"
          aria-expanded="undefined"
          class="van-cell van-cell--clickable van-collapse-item__title"
        >
          <div class="van-cell__title tou"><span>头像</span></div>
          <i class="">
            <van-uploader
              v-model="fileList"
              :max-count="1"
              :after-read="afterRead"
              ref="file"
              :deletable="deletable"
              :preview-image="previewImage"
            >
            </van-uploader>
            <img :src="images ? images : baseImg" alt="" class="img" />
          </i>
        </div>
      </div>
      <van-collapse-item title="介绍" name="3">
        <van-cell-group>
          <van-field
            v-model="value"
            label="个人介绍"
            type="textarea"
            placeholder="请输入简介"
          />
        </van-cell-group>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      fileList: [],
      activeNames: ["1"],
      value1: "",
      value: "",
      userimg: "",
      deletable: false,
      previewImage: true,
    };
  },
  methods: {
    afterRead(file) {
      // console.log(file);
      const forms = new FormData();
      //这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
      forms.append("file", file.file); // 获取上传图片信息
      // console.log(forms);
      axios
        .post("http://8.140.158.200:8080/upload/doUpload", forms, {
          headers: {
            "content-type": "multipart/form-data",
            token: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (localStorage.getItem("userimg") != " ") {
            localStorage.removeItem("userimg");
            localStorage.setItem("userimg", res.data.data);
          } else {
            localStorage.getItem("userimg");
          }
          if (res.data.msg.length > 0) {
            this.$toast(res.data.msg);
            this.deletable = false;
          }
        })
        .catch((err) => {
          if (err.status !== 200) {
            setTimeout(() => {
              file.status = "failed";
              file.message = "上传失败";
              this.$toast("上传失败");
              this.deletable = true;
            }, 1000);
          }
        });
    },
    // 返回上一级
    onClickLeft() {
      this.$router.replace("/profile");
    },
  },
  created() {
    this.baseImg = require("../Login/images/04.png");
    this.username = localStorage.getItem("username");
    this.images = localStorage.getItem("userimg");
  },
};
</script>

<style>
.tou {
  height: 90px;
  line-height: 90px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.el-input--prefix .el-input__inner {
  padding-left: 60%;
}
.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  line-height: 40px;
  outline: 0;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.img {
  position: absolute;
  top: 15px;
  right: 25px;
  left: unset;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.van-uploader {
  width: 100%;
  z-index: 9999;
}
.van-uploader__upload {
  border-radius: 50%;
  margin: 0 8px 8px 0;
  background-color: unset;
}
.van-uploader__upload-icon {
  color: transparent;
  font-size: 24px;
}
.van-image__img {
  -o-object-fit: unset !important;
  object-fit: unset !important;
  border-radius: 50%;
}
.van-nav-bar {
  background-color: #409eff !important;
}
</style>
